<%--
  Created by IntelliJ IDEA.
  User: 47130
  Date: 2021/10/29
  Time: 21:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/IncludeTop.jsp"%>
<style>
    .no-close .ui-dialog-titlebar-close {
        display: none;
    }
    .inform{
        text-align: left;
        margin: 0ex 0ex 0ex 0ex;
        padding: 2ex 2ex 2ex 2ex;
        border-style: ridge;
        border-color: #666666;
        border-radius: 10px;
        background-color: #54c07a;
        float: right;
        background-color: aqua;
    }

</style>

<script type="text/javascript" src="/js/ShowWindowWhenMouseHoverJs.js"></script>
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>

    <div id="Welcome">
        <div id="WelcomeContent">
            Welcome to MyPetStore!
        </div>
    </div>


    <div id="Main">
        <div id="Sidebar">
            <div id="SidebarContent">
                <a href="viewCategory?categoryId=FISH"><img src="images/fish_icon.gif" /></a>
                <br/> Saltwater, Freshwater <br/>
                <a href="viewCategory?categoryId=DOGS"><img src="images/dogs_icon.gif" /></a>
                <br /> Various Breeds <br />
                <a href="viewCategory?categoryId=CATS"><img src="images/cats_icon.gif" /></a>
                <br /> Various Breeds, Exotic Varieties <br />
                <a href="viewCategory?categoryId=REPTILES"><img src="images/reptiles_icon.gif" /></a>
                <br /> Lizards, Turtles, Snakes <br />
                <a href="viewCategory?categoryId=BIRDS"><img src="images/birds_icon.gif" /></a>
                <br /> Exotic Varieties
            </div>
        </div>
        <div id="inform" style="display: none" class="inform"></div>
        <div id="MainImage">
            <div id="MainImageContent">
                <map name="estoremap">
                    <area alt="Birds" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" id="Birds"/>
                    <area alt="Fish" coords="2,180,72,250" href="viewCategory?categoryId=FISH" shape="rect" id="Fish"/>
                    <area alt="Dogs" coords="60,250,130,320" href="viewCategory?categoryId=DOGS" shape="rect" id="Dogs"/>
                    <area alt="Reptiles" coords="140,270,210,340" href="viewCategory?categoryId=REPTILES" shape="rect" id="Reptiles"/>
                    <area alt="Cats" coords="225,240,295,310" href="viewCategory?categoryId=CATS" shape="rect" id="Cats"/>
                    <area alt="Birds" coords="280,180,350,250" href="viewCategory?categoryId=BIRDS" shape="rect" id="Bird"/>
                </map>
                <img height="355" src="images/splash.gif" align="middle" usemap="#estoremap" width="350" />
            </div>
        </div>
        <div id="Separator">&nbsp;</div>
    </div>

<%@include file="../common/IncludeBottom.jsp"%>


